<template>
    <el-row class="type">
        <el-row type="flex" style="height: 40px;margin-bottom: 14px;position: relative">
            <el-button type="primary" size="medium" @click="addEnty" style="width: 130px;position: absolute;right: 0;">新增实体</el-button>
        </el-row>
        <el-table
                :data="entyData"
                size="mini"
                @current-change="userChge"
                height="730"
                max-height="730"
                :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
                highlight-current-row
                border
                style="font-size: 16px;"
        >
            <el-table-column prop="name" label="实体名称" min-width="180"></el-table-column>
            <el-table-column prop="enType" label="实体类型" min-width="180">
                <template slot-scope="scope">
                    {{scope.row.enType === 'Dev' ? '设备' : ''}}
                    {{scope.row.enType === 'Yard' ? '场地' : ''}}
                    {{scope.row.enType === 'Virtual' ? '虚拟' : ''}}
                </template>
            </el-table-column>
            <el-table-column prop="refName" label="关联设施名称" min-width="180"></el-table-column>
            <el-table-column width="300" fixed="right" label="操作">
                <template slot-scope="scope">
<!--                    <el-button type="primary" size="mini" @click="editEnty( scope.row )"-->
<!--                               icon="el-icon-edit">编辑-->
<!--                    </el-button>-->
                    <el-button type="danger" size="mini" @click="deleteEnty( scope.row )"
                               icon="el-icon-delete">删除
                    </el-button>
                    <el-button type="primary" size="mini" @click="editEnatr( scope.row )"
                               >实体属性
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" class="pagination">
            <el-pagination
                    @size-change="userSize"
                    @current-change="pgChge"
                    :current-page="entyPage.currentPage"
                    :page-sizes="[10, 20, 30]"
                    :page-size="entyPage.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="entyPage.totalElements"
            ></el-pagination>
        </el-row>
        <transition name="el-fade-in">
            <floatingBox v-show="editBoxShow">
                <addEnty v-if="addShow" slot="edit" @editState="editState"></addEnty>
                <editEnty v-if="editShow" slot="edit" :entyUuid="uuid" @editState="editState"></editEnty>
                <entyAttrList v-if="enatrShow" slot="edit" :enty="enty" @editState="editState"></entyAttrList>
            </floatingBox>
        </transition>
    </el-row>
</template>

<script>
    import {getDataForSP, writePageInfo} from "../../../utils/webUtils.js";
    import floatingBox from "../../public/floatingBox.vue";
    import editEnty from "./editEnty.vue";
    import addEnty from "./addEnty.vue";
    import entyAttrList from "../entyAttr/entyAttrList.vue";

    export default {
        name: "enty",
        components: {floatingBox, addEnty, editEnty, entyAttrList},
        data() {
            return {
                editBoxShow: false,
                addShow: false,
                editShow: false,
                enatrShow:false,
                userSchOn: '',
                entyEdit: false,
                uuid: '',
                entyData: [],
                entyPage: {
                    pageSize: 10,//每页显示条目个数
                    currentPage: 1,//当前页数
                    totalElements: 0,
                    searchData: {
                        srhData: ''
                    }
                }
            };
        },
        mounted() {
            this.queryEnty();
        },
        methods: {
            addEnty() {
                this.editBoxShow = true;
                this.addShow = true;
                this.editShow = false;
                this.enatrShow = false;
            },
            editState(msg) {
                this.editBoxShow = msg;
                this.editShow = msg;
                this.enatrShow = msg;
                this.addShow = msg;
                this.entyEdit = msg;
                this.queryEnty();
            },
            editEnty(val) {
                this.uuid = val.uuid;
                this.editBoxShow = true;
                this.editShow = true;
                this.entyEdit = true;
            },
            editEnatr(val) {
                this.uuid = val.uuid;
                this.enty = val;
                this.editBoxShow = true;
                this.enatrShow = true;
                this.entyEdit = true;
            },
            deleteEnty(val) {
                this.$confirm('确认删除 ' + val.name + " ?", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.request({
                        method: "delete",
                        url: "./smt/kdi/enty/" + val.uuid,
                        data: {}
                    }).then(() => {
                        this.$message({
                            message: "删除成功!",
                            type: 'success'
                        });
                        this.queryEnty();
                    }).catch(error => {
                        console.log(error);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            userChge(val) {
                if (this.entyEdit) {
                    this.uuid = val.uuid;
                }
            },
            //获取所有数据
            queryEnty() {
                this.axios.request({
                    method: "get",
                    url: "./smt/kdi/enty/search/findAll",
                    params: getDataForSP(this.entyPage)
                }).then(response => {
                    this.entyData = response.data.content;
                    writePageInfo(this.entyPage, response.data);
                }).catch(error => {
                    console.log(error);
                });
            },
            //列表分页
            userSize: function (pageSize) {
                this.entyPage.pageSize = pageSize;
                if (this.entyPage.currentPage === 1) {
                    if (this.userSchOn !== "") {
                        // this.userSearch();
                    } else {
                        this.queryEnty();
                    }
                }
                this.entyPage.currentPage = 1;
            },
            pgChge(currentPage) {
                this.entyPage.currentPage = currentPage;
                this.queryEnty();
            }
        }
    };
</script>

<style scoped>
    .type {
        width: calc(100% - 100px);
    }


</style>